<script  setup>
import { onMounted, ref } from 'vue'
import balls from "./ballRank.vue"
import '../assets/animate.css';
defineProps({
  msg: String
})

const count = ref(0)


onMounted(()=>{
	
	})
</script>

<template>
	  <div class="rankView flex-box">
		 
    <div class="rankItem"  >
		<div class="animate__animated animate__backInLeft">
		  <img  class="fonImg animate__animated animate__flipInX" src="../assets/fon.png" alt="" />
		  </div>
		<balls ></balls>
	</div>
	<div class="box-right animate__animated animate__bounceInRight">
		<div class="pathBox animate__animated animate__backInRight">
			
		
			  <img id="sphere" class="pathImg" src="../assets/pathBg.png" alt="" />
			  <div >
				  <img class=" fon2Img" src="../assets/fon2.png" alt="" />
			  </div>
		 </div>
	</div>
</div>
</template>

<style lang="less" scoped>

.rankView{

	.rankItem{
		
		
	}
	.fonImg{
		height:auto;
		width: 661.5px;
		margin-bottom: 30px;
		animation: rotateZ 800ms linear ;
		animation-delay: 2.8s;
		filter: blur(.5px);
		
	}
	.fon2Img{
		height:auto;
		width: 509px;
		
	}
	.box-right{
		margin-left: 30px;
		padding-top: 90px;
		animation-delay:  3.1s;
		.pathBox{
			animation: rotateY 780ms linear ;
			animation-delay: 3.88s !important;
		}
		
	}
	.pathImg{
		height:483px;
		width: auto;
	}
}
</style>
